<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"></script>
        <link rel="stylesheet" href="../css/jquery-ui-1.8.16.custom.css" type="text/css" />
        <style>
            #demo-frame > div.demo { padding: 10px !important; };
        </style>
        <script>
            $(function() {
                var select = $( "#minbeds" );
                var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
                    min: 2,
                    max: 6,
                    range: "min",
                    value: select[ 0 ].selectedIndex + 1,
                    slide: function( event, ui ) {
                        select[ 0 ].selectedIndex = ui.value - 1;
                    }
                });
                $( "#minbeds" ).change(function() {
                    slider.slider( "value", this.selectedIndex + 1 );
                });
            });
        </script>
    </head>
    <body>



        <div class="demo">

            <form id="reservation">
                <label for="minbeds">Minimum number of beds</label>
                <select name="minbeds" id="minbeds">
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                </select>
            </form>

        </div><!-- End demo -->
        <div class="demo-description">
        </div><!-- End demo-description -->       
    </body>
</html>
